<template>
  <div class="app-container">
    <div class="head-container">
      <el-date-picker style="width: 400px;" class="filter-item" size="small"
      		v-model="timeValue"
           @change="handleDateChange"
      		type="daterange"
      		value-format="yyyy-MM-dd"
      		range-separator="至"
      		start-placeholder="开始日期"
      		end-placeholder="结束日期">
      </el-date-picker>
      <treeselect v-model="deptId" class="filter-item treeselect-main"
       @input="deptIdChange"
       :disableBranchNodes="false"
       :default-expand-level="2"
      :options="depts"  placeholder="选择部门" />
      <el-input v-model="userName" clearable @clear="init" placeholder="输入受训人员姓名搜索" maxlength="10" style="width: 200px;"
                class="filter-item" @keyup.enter.native="init"/>

      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="init">搜索</el-button>
    </div>
    <el-table v-loading="loading" :data="data" ref="table" size="small" style="width: 100%;" border>
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="60">
      </el-table-column>
      <el-table-column prop="user_name" label="名称" align="center"/>
      <el-table-column prop="source" label="得分"  align="center"/>
      <el-table-column prop="type" label="检测类型" align="center"/>
      <el-table-column label="检测时间" align="center">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.create_time) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="use_time" label="检测用时" align="center">
        <template slot-scope="scope">
          <span>{{formatSeconds(scope.row.use_time)}}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :total="total"
      :current-page="page + 1"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"/>
      <rank-from ref="rkForm"></rank-from>
  </div>
</template>

<script>
  import rankFrom from './rankFrom'
  import initData from '@/mixins/initData'
  import { getDepts } from '@/api/framework/system/dept'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import { formatSeconds,parseTime } from '@/utils/index'
  export default {
    mixins: [initData],
    components: { rankFrom ,Treeselect},
    data() {
      return {
        timeValue:[],
        depts: [],
        deptId:null,
        style: 'width: 200px',
        loading: false,
        delLoading: false,
        userName:''
      }
    },
    created() {
      this.$nextTick(() => {
        this.init()
        this.getDepts()
      })
    },
    methods: {
      formatSeconds,
      parseTime,
      beforeInit() {
        this.url = 'practice/all-user-grade'
        this.params = {
          page: this.page,
          size: this.size,
          userName:this.userName,
          deptId:this.deptId
        }
        if(this.timeValue!=null && this.timeValue.length>=2){
        	this.params.startTime=this.timeValue[0]
        	this.params.endTime=this.timeValue[1]
        }
        return true
      },
      handleDateChange(val) {
        if (!val) {
          this.timeValue = null;
          this.init()
        }
      },
      getDepts() {
        getDepts({ enabled: true }).then(res => {
          this.depts = res.content
        })
      },
      deptIdChange(val){
        if (!val) {
          this.deptId = null;
          this.init()
        }
      }
    }
  }
</script>

<style scoped>

  .el-range-editor--small.el-input__inner {
      height: 31px;
  }
  .treeselect-main {
      margin-top: 1px;
      line-height: 29px;
      width: 200px;
      .vue-treeselect__placeholder {
        line-height: 29px;
      }
      .vue-treeselect__control {
        height: 29px;
      }
    }
</style>
